<template>
  <view class="container">
    <image :src="imgurl + obj.prayer_image" style="width: 100%; height: 100%" mode="aspectFill"></image>
    <view class="countdown" v-if="!show">{{ time + 's' }}</view>
    <uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
      <view class="box">
        <image :src="imgurl + imgresult" mode="aspectFill" class="img"></image>
        <!--  <image src="../../static/dog.png" mode="aspectFill" class="dog"></image> -->
        <!-- <view class="word">{{ keywordlist[random] }}</view> -->
        <view class="word">{{ keyword }}</view>
        <uni-icons type="close" size="30" @click="cnacelbox" class="icon"></uni-icons>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, nextTick, reactive, getCurrentInstance } from 'vue';
import { onLoad, onHide, onShow, onUnload } from '@dcloudio/uni-app';
const proxy = getCurrentInstance().appContext.config.globalProperties;
const http = proxy.$http;
const imgurl = ref('https://prayer.jiangkukeji.cn');
const time = ref(5);
const timer = ref(null);
const popup = ref(null);
const show = ref(false);
const keywordlist = reactive(['事业有成', '终成眷属', '金榜题名', '丰功伟业', '心心相印', '旗开得胜', '锦绣前程', '永浴爱河', '学有所成']);

const keyword = ref('');
const random = ref('');
const obj = ref({});
let orderid = ref('');
const imgresult = ref('');
//获取配置
const getsetting = async () => {
  const res = await http('/user/getSetRes', {}, 'POST');
  console.log('祈福的时间', res);
  obj.value = res.data;
  time.value = res.data.prayer_time;
};

// 关闭弹框
const cnacelbox = () => {
  popup.value.close();
  uni.reLaunch({
    url: '/pages/index/index'
  });
};

onLoad((e) => {
  if (e.orderid) {
    orderid.value = e.orderid;
    console.log('祈福页面的订单id', orderid.value);
  }
  // 获取配置
  getsetting();
  random.value = parseInt(Math.random() * 9) + 1;
  console.log('随机数', random.value);
  nextTick(() => {
    timer.value = setInterval(async () => {
      time.value--;
      if (time.value == 0) {
        const res = await http(
          '/user/getOrderDetail',
          {
            order_no: orderid.value
          },
          'POST'
        );
        console.log('获取的订单结果', res);
        imgresult.value = res.data.prayer_image;
        keyword.value = res.data.prayer_title;
        popup.value.open();
        show.value = true;
        clearInterval(timer.value);
        timer.value = null;
      }
    }, 1000);
  });
});
onHide(() => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
});
onUnload(() => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
});
</script>

<style lang="scss">
.container {
  box-sizing: border-box;
  width: 750rpx;
  height: 1440rpx;
  background: #ffebef;
  .countdown {
    position: fixed;
    top: 40rpx;
    right: 40rpx;
    box-sizing: border-box;
    width: 87rpx;
    height: 42rpx;
    text-align: center;
    line-height: 42rpx;
    background: #222222;
    border-radius: 21rpx;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #ffffff;
    opacity: 0.3;
  }
  .box {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 583rpx;
    height: 700rpx;
    background: rgba(0, 0, 0, 0);
    border-radius: 30rpx;
    // border: 5px solid #222222;
    .img {
      position: absolute;
      top: 0;
      left: 0;
      width: 583rpx;
      height: 448rpx;
    }
    .icon {
      position: absolute;
      bottom: 180rpx;
      left: 260rpx;
    }
    .word {
      font-family: MaokenAssortedSans;
      font-weight: 400;
      font-size: 100rpx;
      color: #222222;
      z-index: 10;
      position: absolute;
      top: 160rpx;
    }
    .dog {
      position: absolute;
      width: 345rpx;
      height: 295rpx;
      top: -150rpx;
      left: 110rpx;
    }
  }
}
</style>
